<template>
  <div>  
      <el-form
        :model="giftRuleData"  
        :rules="gift_type.id==1?giftInfoBIFormRules:rights_giftInfoBIFormRules" 
        ref="giftRuleBIFormRef"
        label-width="150px"
      > 
        <el-form-item label="采购品类" prop="category">
            <el-select
            v-model="giftRuleData.category"
            placeholder="请选择采购品类"
            filterable
            clearable
            style="width:60%"
          >
            <el-option
                v-for="item in selectData.service_category"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select> 
        </el-form-item>

        <el-form-item label="采购实体" prop="service_id">
          <el-select
            v-model="giftRuleData.service_id" 
            placeholder="请选择采购实体"
            filterable
            clearable
            style="width:60%"
          >
            <el-option
              v-for="item in selectData.get_service"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购数量" prop="ticket_num">
          <div v-if="gift_type.id==1"> <!--1:服务礼包;权益礼包为1，不可修改-->
            <el-input
              v-model="giftRuleData.ticket_num"
              placeholder="请输入采购数量"
              style="width:60%"
            ></el-input>
          </div>
          <div v-else>
            <el-input
              disabled
              v-model="giftRuleData.ticket_num"
              placeholder="请输入采购数量"
              style="width:60%"
            ></el-input>
          </div>
          
        </el-form-item>
        <el-form-item v-show="gift_type.id==1" label="每个周期生成券数" prop="periodic_release_num" :required="gift_type.id==1?true:false">
          <el-input
            v-model="giftRuleData.periodic_release_num"
            placeholder="请输入每个周期生成的券数"
            style="width:60%"
          ></el-input>
        </el-form-item>

        <el-form-item v-show="gift_type.id==1" label="周期" prop="period" :required="gift_type.id==1?true:false" >
          <el-row style="width:60%">  
            <el-date-picker
              v-if="giftRuleData.period_unit=='exdate'" 
              v-model="giftRuleData.period"
              type="date" 
              value-format="yyyy-MM-dd"
              placeholder="请选择" 
              style="width:30%"  
              
            ></el-date-picker> 
            <el-input 
              v-else 
              v-model="giftRuleData.period"
              placeholder="请输入" 
              style="width:30%" 
              
            > 
            </el-input>
              
            <el-select
              prop="period_unit"
              v-model="giftRuleData.period_unit"
              placeholder="请选择"
              style="width:30%" 
              required
              >
              <el-option   
                v-for="item in selectData.period_unit" 
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option> 
            </el-select>  
          </el-row> 
          
        </el-form-item>
          
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            v-model="giftRuleData.remark"
            placeholder="请输入备注"
            show-word-limit
            maxlength="500"
            style="width:60%"
          ></el-input>
        </el-form-item>
      </el-form> 
  
  </div>
</template>

<script>
  
export default {
  props: { 
    gift_type:{
      type: Object,
      default: function () {
        return {}
      }
    },
    grData:{
      type: Object,
      default: function () {
        return {}
      }
    }, 
  },
  
  data() {
    return { 
      selectData:{},
      getServiceData:{},  //采购实体：为便于独立获取渲染（单独获取）
      giftRuleData:{  //礼包规则 
        category:{
          id:null,
          name:null
        },
      //  gift_id:'', 
        service_id: '',
        ticket_num: '', 
        periodic_release_num: '',
        //user_release_num:'',
        period: '',
        period_unit: null,
        remark:'' 
      }, 

      giftInfoBIFormRules: {  //数据校验：
        category: [{ required: true, message: '请选择采购品类', trigger: 'change' }],
        service_id: [{ required: true, message: '请选择采购实体', trigger: 'change' }],
        ticket_num: [{ required: true, message: '请输入采购数量', trigger: 'blur' }],
        periodic_release_num: [{ required: true, message: '请输入每个周期生成的券数', trigger: 'blur' }],
        period: [{ required: true, message: '请输入周期',  trigger: ['blur', 'change'] }],
        period_unit: [{ required: true, message: '请选择周期',  trigger: ['blur', 'change'] }], 
      },
     
      rights_giftInfoBIFormRules: {  //数据校验：
        category: [{ required: true, message: '请选择采购品类', trigger: 'change' }],
        service_id: [{ required: true, message: '请选择采购实体', trigger: 'change' }],
        ticket_num: [{ required: true, message: '请输入采购数量', trigger: 'blur' }], 
      },
       
    }
  },
  created() {
    this.getSelectData()  //获取下拉列表的数据  
    if(this.grData){
      this.giftRuleData = JSON.parse(JSON.stringify(this.grData))
      //  console.log("添加礼包规则，保留已有的礼包信息：");  
      //  console.log(this.giftRuleData);
    } 
  },
  
  watch: { 
    giftRuleData: {
      handler(newValue, oldValue) {
          
        // console.log('watch  监听礼包规则数据 ') 
        // console.log(oldValue)   
        // console.log(newValue)
          
         if(newValue.category!=oldValue.category||newValue.category!=''){   
           this.selectData.get_service=[]
           this.getSelectData(newValue.category)
         }
   
      },
      deep: true
    },
    
    
  },
  
  methods: {
   
    async getSelectData(sid) {   //获取筛选条件数据： 
      var service_type='' 
      if(sid!=undefined){
        service_type=sid
      }
      const { data: res } = await this.$http.post('/admin/data/find', {
        code: 'service_category,get_service,period_unit',service_type:service_type 
      })
      // 返回结果
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.selectData = res.data

      // 采购品类:根据礼包类型渲染  权益礼包如下
      // console.log(this.gift_type);
      if(this.gift_type.id!=1){ //1：服务礼包  
        this.selectData.service_category=[{id: 4, name: "服务卡"}, {id: 3, name: "兑换券"}] 
        this.giftRuleData.ticket_num=1
      } 

    }, 
   
    resetAllData() {
      // 清空校验
      this.$refs.giftRuleBIFormRef.resetFields()
      this.giftRuleData = {}
    },
    validateForm() {
      let flag = false
      this.$refs.giftRuleBIFormRef.validate(async (valid) => {
        if (valid) {
          flag = true
        } else {
          flag = false
        }
      })
      return flag
    },
    getFinalData() { 
      // console.log("最终的礼包信息：");
      // console.log(this.giftRuleData);
   
      this.$emit('getGiftRule', this.giftRuleData) 
      
    },
   
  },
 
}
</script>

<style lang="less" scoped>
.el-card {
  margin-bottom: 10px;
}
/deep/.noBorder .el-input__inner {
  border: none;
} 
</style>
